<template>
	<view>
		<topBarNvue :pageIndex="pageIndex"></topBarNvue>
		<!--云相册列表-->
		<view>
			<view v-for="(list, index) in lists" :key="index" class="list-item" @click="">
				<view v-if="list.icon">
					<uni-icons :color="list.isExtend ? '#9f9f9f' : '#259bfd'" :type="list.icon" size="35"></uni-icons>
				</view>
				<view v-if="list.picture">
					<image :src="list.picture" class="left-image"></image>
				</view>
				<view class="list-item-text" :style="{color: list.isExtend ? '' : '#259bfd'}" @tap="listClick(list)">
					<view style="display: flex; flex-direction: column;">
						<text style="display: flex; align-items: center;">
							<text>{{list.name}}</text>
							<view style="margin-left: 5rpx;" v-if="list.number != null">
								({{list.number}})
							</view>
						</text>
						<view class="bottom-text" v-if="list.picture">
							<text v-if="list.status == 0">仅自己可见</text>
							<text v-else-if="list.status == 1">部分好友可见</text>
							<text v-else-if="list.status == 2">公开可见</text>
							<text v-else></text>
						</view>
					</view>
					<view class="list-item-right">
						<text>{{list.extendText}}
						</text>
						<uni-icons v-if="list.isExtend" color="#9f9f9f" type="right" size="25"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popupRef" type="dialog">
			<uni-popup-dialog mode="input" title="新建相册" placeholder="请输入相册名称" :before-close="true" @close="close" @confirm="confirm">
			</uni-popup-dialog>
		</uni-popup>
		<uni-fab
			:pattern="pattern"
			:content="content"
			horizontal="right"
			vertical="bottom"
			@trigger="trigger"
		></uni-fab>
	</view>
</template>

<script setup>
import { onMounted, ref } from "vue";
import topBarNvue from "../../components/top_bar.nvue"
import imagePng from "../../static/common/blank-image.png"
import videoPng from "../../static/common/video.png"
import filePng from "../../static/common/file.png"
import allPng from "../../static/common/All.png"
import {onShow} from '@dcloudio/uni-app';


const lists = ref([
	{
		"id": "1",
		"icon": "wallet-filled",
		"name": "手机储存",
		"extendText": "39.1GB可用",
		"isExtend": true,
		"isNewCreated": false
	},
	{
		"id": "2",
		"icon": "plusempty",
		"name": "创建新相册",
		"extendText": "",
		"isExtend": false,
		"isNewCreated": false
	},
	{
		"id": "3",
		"icon": "image-filled",
		"name": "公开相册",
		"extendText": "朋友圈",
		"isExtend": true,
		"number": 3,
		"isNewCreated": false
	},
	{
		"id": "4",
		"icon": "locked-filled",
		"name": "私人相册",
		"extendText": "",
		"isExtend": true,
		"number": 2,
		"isNewCreated": false
	},
	{
		"id": "5",
		"icon":"locked",
		"name": "新相册",
		"extendText": "",
		"isExtend": true,
		"number": 3,
		"isNewCreated": true
	},
	{
		id: "10",
		picture: "../../static/logo.png",
		name: "家人",
		exTendText: "",
		isExtend: true,
		number: 0,
		isNewCreated: true,
		status: 0
	}
])
const popupRef = ref(null)
//点击列表
const listClick = (list) => {
	if(list.id == "2"){
		popupRef.value.open()
	}
	
}
//右下角图标
const content = ref([{
		iconPath: imagePng,
		text: '上传图片',
	},
	{
		iconPath: videoPng,
		text: '上传视频',
	},
	{
		iconPath: filePng,
		text: '上传文件'
	},
	{
		iconPath: allPng,
		text: "全部"
	}
])
const pattern = ref({
	color: '#7A7E83',
	backgroundColor: '#fff',
	selectedColor: '#259bfd',
	buttonColor: '#259bfd',
	iconColor: '#fff'
}) 
const close = () => {
	popupRef.value.close()
}
const confirm = (value) => {
	if(value != ""){
		//进行相册创建
		lists.value.push({
			"id": "10",
			"picture": "../../static/common/blank-image.png",
			"name": value,
			"exTendText": "",
			"isExtend": true,
			"number": 0,
			"isNewCreated": true,
			"status": 0
		})
	}
	//todo 将数据传递给后端
	popupRef.value.close()
}

//获取手机储存容量
const getStorage = () => {
    const environment = plus.android.importClass("android.os.Environment");
    const statFs = plus.android.importClass("android.os.StatFs");
    plus.android.importClass("java.io.File");
    const Files = environment.getDataDirectory();
    const StatFs = new statFs(Files.getPath());
    const blockAva = parseFloat(StatFs.getAvailableBlocks());
    const blockSize = parseFloat(StatFs.getBlockSize());
    const internalMemSize = blockSize * blockAva;
    // 自己根据单位来计算结果，本示例计算的是以为G单位的剩余容量
    const freeSize = internalMemSize / 1024 / 1024 / 1024;
	console.log("获取容量", freeSize.toFixed(2) + 'GB')
	//将容量写入lists中
	lists.value.forEach((item) => {
		if(item.id == 1){
			item.extendText = freeSize.toFixed(2) + 'GB可用'
			return
		}
	})
}
//悬浮按钮菜单
const trigger = (e) => {
	console.log(e.index)
	if(e.index == 0){
		uni.chooseImage({
			count: 200,
			sizeType: ['original', 'compressed'],
			sourceType: ['album'], //从相册中选择
			success: function (res) {
				console.log(res.tempFilePaths)
			}
		})
	}else if(e.index == 1){
		uni.chooseVideo({
		  sourceType: ['album', 'camera'],
		  maxDuration: 300,
		  camera: 'back',
		  success(res) {
		    console.log(res.tempFiles)
		  }
		})
	}else if(e.index == 2){
		uni.chooseFile({
		  count: 6, //默认100
		  extension:['.zip','.doc'],
			success: function (res) {
				console.log(JSON.stringify(res.tempFilePaths));
			}
		})
	}
	
}
//每次页面加载时调用
const pageIndex = ref(0)
onShow(() => {
	//改变头部右侧图标
	pageIndex.value = 4
	
})
onMounted(() => {
	//获取手机储存容量
	getStorage()
})
</script>

<style lang="scss" scoped>
.list-item{
	border-bottom: 1rpx solid #f5f5f5;
	height: 130rpx;
	display: flex;
	align-items: center;
	padding: 0 15rpx 0 15rpx;
	.list-item-text{
		margin-left: 50rpx;
		font-size: 18px;
		display: flex;
		align-items: center;
		width: 100%;
		.list-item-right{
			margin-left: auto;
			display: flex;
			align-items: center;
			color: #9f9f9f;
			text{
				margin-right: 15rpx;
			}
		}
		.bottom-text{
			font-size: 12px;
			margin-top: 5rpx;
			color: #9f9f9f;
		}
	}
}
.left-image{
	height: 80rpx;
	width: 80rpx;
}
</style>